<script setup lang="ts">
import { getValue, setValue } from './tools'

const obj = {
  num: 12,
  str: 'hello',
  nul: null,
  arr: [{
    name: 'a1',
    children: [1, 'hi']
  }],
  obj: {
    name: 'obj',
    age: 22,
    oa1: [2, null, 'oa1'],
    oa2: { name: 'test' }
  },
};

// console.log('const obj = ', JSON.stringify(obj, null, '  '))
// console.log('str', getValue(obj, 'str')); // hello
// console.log('a.b', getValue(obj, 'a.b')); // undefined
// console.log('arr[0]', getValue(obj, 'arr[0]')); // {name: 'a1', children: [1, hi]}
console.log('arr[0].children[1]', getValue(obj, 'arr[0].children[1]')); // hi
// console.log('obj.name', getValue(obj, 'obj.name')); // obj
console.log('obj["oa2"].name', getValue(obj, 'obj["oa2"].name')); // test
// console.log('obj.oa2.age', getValue(obj, 'obj.oa2.age')); // undefined
setValue(obj, 'thiskey[2].children[3]', 'new value')
// console.log('const obj =', JSON.stringify(obj, null, '  '))
</script>

<template>
  <div class="Box">
    <div class="view">

    </div>
    <div class="json">asdadsad</div>
  </div>
</template>

<style lang="less" scoped>
.Box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;

  >div {
    width: 50%;
    height: 100%;
    background-color: #333;
  }
}
</style>
